import React, { useEffect, useRef } from 'react'
import myinfo from '../../mobx/info'
import { Carousel , Avatar,Card, Descriptions,Input, Button, Switch  } from 'antd';
import { Collapse } from 'antd';
import { baseURL } from '../../api/request';
import moment from 'moment'
import { roleList, toast } from '../../utils/commom';
import {UserOutlined,PhoneOutlined } from '@ant-design/icons'
import { observer } from 'mobx-react';
import { ajax } from '../../api';
import { reg } from '../../utils/validate';
import img1 from '../../assets/images/1.jpg'
import img2 from '../../assets/images/2.jpeg'
import img3 from '../../assets/images/3.jpeg'
import img4 from '../../assets/images/4.webp'
const { Meta } = Card;

const { Panel } = Collapse;

 function InfoIndex({history}:any) {
    const Uname:any = useRef()
    const Uphone:any = useRef()
    const {userInfo,getUserInfoAsync,changeMyInfo} = myinfo
    useEffect(()=>{
    getUserInfoAsync({})
   },[])

const changeUsername =async ()=>{
const value = (Uname.current.state.value);
if((value == userInfo.username) || (value =="")){
    toast.warning('未修改或者空不能提交')
}else{
    
 let {code,result}:any =await  ajax.changeUser({
     username:value,
     _id:userInfo._id
 })
 if(code==200){
     console.log(result);
     history.push('/login?username='+value)
 }
}
}

const changePhone =async ()=>{
    const value = (Uphone.current.state.value);
    if((value == userInfo.phone) || (value =="")){
        toast.warning('未修改或者空或者不合法不能提交')
        
    }else{
        console.log(reg.phone.test(value));
        if(reg.phone.test(value)){
     let {code,result}:any =await  ajax.changeUser({
         phone:value
     })
     if(code==200){
         console.log(result);
         history.push('/login?phone='+value)
     }
        }else{
         toast.warning('手机号不合法')
        }
   
    }
}

const callback=()=> {}
const onChange=()=>{
}

const contentStyle:any = {
    height: '300px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
  }

    return (
        <div>
            <h2  style={{fontSize:30}}>个人信息</h2>
           
            <Carousel autoplay effect={'fade'} afterChange={onChange} dotPosition={'left'}>
    <div>
      <h3 style={contentStyle}>
          <img style={{height:'100%',width:"100%"}} src={img1} alt="" />
      </h3>
    </div>
    <div>
    <h3 style={contentStyle}>
          <img style={{height:'100%',width:"100%"}} src={img2} alt="" />
      </h3>
    </div>
    <div>
    <h3 style={contentStyle}>
          <img style={{height:'100%',width:"100%"}} src={img3} alt="" />
      </h3>
    </div>
    <div>
    <h3 style={contentStyle}>
          <img style={{height:'100%',width:"100%"}} src={img4} alt="" />
      </h3>
    </div>
  </Carousel>,
            <Collapse accordion={true}  onChange={callback}>
              <Panel header="基本信息" key="1">
                <Collapse defaultActiveKey="1">
                    <Panel header="我的信息" key="1">
                    <Card hoverable style={{ width: 300, marginTop: 16 }} >
          <Meta
            avatar={<Avatar src={userInfo.avatar?.replace(/public/,baseURL)} />}
            title={userInfo?.username}
          />
            <Descriptions column={1} style={{marginTop:20}}>
    <Descriptions.Item  label="绑定的手机号">{userInfo.phone}</Descriptions.Item>
    <Descriptions.Item label="账号密码">{userInfo.password}</Descriptions.Item>
    <Descriptions.Item label="我的身份">{roleList.find((v:any)=>v.value==userInfo.role)?.text}</Descriptions.Item>
    <Descriptions.Item label="注册时间">{moment(userInfo.time).format('YYYY-MM-DD')}</Descriptions.Item>
  </Descriptions>,
        </Card>

                    </Panel>
                </Collapse>
              </Panel>
              <Panel header="修改信息" key="2">
  
  <Collapse defaultActiveKey="">
        <Panel header="修改用户名" key="1">
        <Input.Group compact>
      <Input ref={Uname} prefix={<UserOutlined />} style={{ width: 'calc(100% - 200px)' }} defaultValue={userInfo?.username} />
      <Button htmlType='submit' onClick={changeUsername} type="primary">确认修改</Button>
    </Input.Group>
        </Panel>

        <Panel header="修改绑定的手机号" key="2">
        <Input.Group compact>
      <Input  ref={Uphone} prefix={<PhoneOutlined />} style={{ width: 'calc(100% - 200px)' }} defaultValue={userInfo?.phone} />
      <Button htmlType='submit' onClick={changePhone} type="primary">确认修改</Button>
    </Input.Group>
        </Panel>
      </Collapse>
              </Panel>

              <Panel header="通用" key="3">
                白天模式:&nbsp;&nbsp;&nbsp;<Switch defaultChecked onChange={onChange} />&nbsp;&nbsp;&nbsp;&nbsp;
              </Panel>
              <Panel header="关于我们" key="4">
               <p style={{textAlign:'center'}}> 本产品用于物业管理，使业者正好的反馈信息，更好的生活体验
                    开发者---王东风/李燚/王池
                   </p>
                <p style={{textAlign:'center'}}>详情请联系我们:wdf05110203.@163com</p>
             </Panel>
            
            </Collapse>,
        </div>
    )
}

function v(v: any): void {
    throw new Error('Function not implemented.');
}

export default observer(InfoIndex)